import React, {Component} from 'react';
import {withRouter, Link, Switch, Route} from 'react-router-dom'
import {Tag, DatePicker, Button, message} from 'antd';
import echarts from 'echarts'
import Loading from "./../loading"

import "./../../static/specialMonitoring/analysis.styl"
import u from "../../common";
import $ from "jquery"
import moment from "moment/moment";

const CheckableTag = Tag.CheckableTag;
const tagsFromServer = ['今日', '本周', '本月'];
const {RangePicker} = DatePicker;

export default class Analysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hours: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
      index: props.index,
      keywords:"",
      total: 0,
      todayTotal: 0,
      trendX:["2:00","4:00","6:00","8:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00"],
      trendData:[],
      carrier:[],
      rangeToday:'',
      sites:["城关区","堆龙德庆区","达孜区","林周县","当雄县","尼木县","曲水县"],
      siteState:[],
      colors1: ['#5487FF', '#80DB35', '#325EFC', '#F2C04A', '#F56767','#5487FF', '#80DB35', '#325EFC', '#F2C04A', '#F56767','#F2C04A', '#F56767'],
      colors2: ['#80DB35', '#F2C04A', '#F56767', '#325EFC', '#3D77FF']
    };
  }
  timeRange = async (type) => {
    if(type===0){
      $(".at-select Button:nth-child(1)").addClass("activeBtn").siblings().removeClass("activeBtn");
      let todayZero=u.getDate(0,false);
      let todayData=[];
      let range1=moment(todayZero).format('YYYYMMDDHH')+"-"+moment(todayZero).add(2, 'H').format('YYYYMMDDHH')+","+
        moment(todayZero).add(2, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(4, 'H').format('YYYYMMDDHH')+","+
        moment(todayZero).add(4, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(6, 'H').format('YYYYMMDDHH')+","+
        moment(todayZero).add(6, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(8, 'H').format('YYYYMMDDHH')+","+
        moment(todayZero).add(8, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(10, 'H').format('YYYYMMDDHH')+","+
        moment(todayZero).add(10, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(12, 'H').format('YYYYMMDDHH')+","+
        moment(todayZero).add(12, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(14, 'H').format('YYYYMMDDHH')+","+
        moment(todayZero).add(14, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(16, 'H').format('YYYYMMDDHH')+","+
        moment(todayZero).add(16, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(18, 'H').format('YYYYMMDDHH')+","+
        moment(todayZero).add(18, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(20, 'H').format('YYYYMMDDHH')+","+
        moment(todayZero).add(20, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(22, 'H').format('YYYYMMDDHH')+","+
        moment(todayZero).add(22, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(24, 'H').format('YYYYMMDDHH');

        var date = new Date()
        var week = new Date().getDay()
        var year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let newTime = year + '-' + month + '-' + day + ' ' + '00:00:00'
        let timeList = []
    
        var dayList = []
        for (var i = 0; i < this.state.hours.length; i++) {
          if (this.state.hours[i] < 10) {
            let dayTime = '' + year + '-' + month + '-' + day + ' 0' + this.state.hours[i] + ':00:00'
            // alert((new Date(dayTime)).getTime())
            dayList.push((new Date(dayTime)).getTime())
          } else {
            let dayTime = '' + year + '-' + month + '-' + day + ' ' + this.state.hours[i] + ':00:00'
            dayList.push((new Date(dayTime)).getTime())
          }
        }
        var timeStr = ''
        for (var i = 0; i < dayList.length - 1; i++) {
          timeStr = timeStr + dayList[i] + '-' + dayList[i + 1] + ','
        }
        timeStr = timeStr.substring(0, timeStr.length - 1)

      u.dataStatistics({
        "keyWord":this.state.keywords,
        "aggsType": "range",
        "aggsField": "addTime",
        "ranges": timeStr,
        "aggsSize":20,
        "size":0
      }, data => {
        // console.log(data);
        for(let i=0;i<data.aggs.length;i++){
          todayData.push(data.aggs[i].count)
        }
        this.setState({
          trendData:todayData,
          trendX:["2:00","4:00","6:00","8:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00"],
        },()=>{
          this.trend();
        })
      });
    }else if(type===1){
      $(".at-select Button:nth-child(2)").addClass("activeBtn").siblings().removeClass("activeBtn");
      let now = new Date(); //当前日期
      let nowDayOfWeek = now.getDay(); //今天本周的第几天
      let weekData=[];
      // let weekRange=moment().add(-nowDayOfWeek+1, 'days').format('YYYYMMDD')+"-"+moment().add(-nowDayOfWeek+2, 'days').format('YYYYMMDD')+","+
      //   moment().add(-nowDayOfWeek+2, 'days').format('YYYYMMDD')+"-"+moment().add(-nowDayOfWeek+3, 'days').format('YYYYMMDD')+","+
      //   moment().add(-nowDayOfWeek+3, 'days').format('YYYYMMDD')+"-"+moment().add(-nowDayOfWeek+4, 'days').format('YYYYMMDD')+","+
      //   moment().add(-nowDayOfWeek+4, 'days').format('YYYYMMDD')+"-"+moment().add(-nowDayOfWeek+5, 'days').format('YYYYMMDD')+","+
      //   moment().add(-nowDayOfWeek+5, 'days').format('YYYYMMDD')+"-"+moment().add(-nowDayOfWeek+6, 'days').format('YYYYMMDD')+","+
      //   moment().add(-nowDayOfWeek+6, 'days').format('YYYYMMDD')+"-"+moment().add(-nowDayOfWeek+7, 'days').format('YYYYMMDD')+","+
      //   moment().add(-nowDayOfWeek+7, 'days').format('YYYYMMDD')+"-"+moment().add(-nowDayOfWeek+8, 'days').format('YYYYMMDD');

        var date = new Date()
        var week = new Date().getDay()
        var year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let timeList = []
        let newTime = year + '-' + month + '-' + day + ' ' + '00:00:00'
        for (var i = 0; i < week; i++) {
          let time = new Date(Date.parse(newTime) - 86400 * i * 1000)
          var y = time.getFullYear();
          var m = time.getMonth() + 1;
          var d = time.getDate();
          let week = '' + y + '-' + m + '-' + d + ' 00:00:00'
          timeList.push((new Date(week)).getTime())
        }
        if (7 - week > 0) {
          for (var j = 1; j <= (7 - week); j++) {
            let time = new Date(Date.parse(newTime) + 86400 * j * 1000)
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            let week = '' + y + '-' + m + '-' + d + ' 00:00:00'
            timeList.push((new Date(week)).getTime())
          }
        }
        let timeArray = timeList.sort()
        var str = ''
        for (var i = 0; i < timeArray.length - 1; i++) {
          str = str + timeArray[i] + '-' + timeArray[i + 1] + ','
        }
        let weekRange = str.substring(0, str.length - 1)
      u.dataStatistics({
        "keyWord":this.state.keywords,
        "aggsType": "range",
        "aggsField": "addTime",
        "ranges": weekRange,
        "aggsSize":20,
        "size":0
      }, data => {
        // console.log(data);
        for(let i=0;i<data.aggs.length;i++){
          weekData.push(data.aggs[i].count)
        }
        this.setState({
          trendData:weekData,
          trendX:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
        },()=>{
          this.trend();
        })
      });
    }else if(type===2){
      $(".at-select Button:nth-child(3)").addClass("activeBtn").siblings().removeClass("activeBtn");
      let monthData=[];
      let start = new Date();
      start.setDate(1);//当前月的第一天
      let date = new Date();
      let currentMonth = date.getMonth();
      let nextMonth = ++currentMonth;
      let nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
      let oneDay = 1000 * 60 * 60 * 24;
      let end = new Date(nextMonthFirstDay - oneDay);//当前月的最后一天
      var nowMonth = new Date().getMonth(); //当前月
      let lastDay=moment(end).format('DD');
      if(nowMonth==1){
        let monthRange=moment(start).format('YYYYMMDD')+"-"+moment(start).add(2, 'days').format('YYYYMMDD')+","+
          moment(start).add(2, 'days').format('YYYYMMDD')+"-"+moment(start).add(4, 'days').format('YYYYMMDD')+","+
          moment(start).add(4, 'days').format('YYYYMMDD')+"-"+moment(start).add(6, 'days').format('YYYYMMDD')+","+
          moment(start).add(6, 'days').format('YYYYMMDD')+"-"+moment(start).add(8, 'days').format('YYYYMMDD')+","+
          moment(start).add(8, 'days').format('YYYYMMDD')+"-"+moment(start).add(10, 'days').format('YYYYMMDD')+","+
          moment(start).add(10, 'days').format('YYYYMMDD')+"-"+moment(start).add(12, 'days').format('YYYYMMDD')+","+
          moment(start).add(12, 'days').format('YYYYMMDD')+"-"+moment(start).add(14, 'days').format('YYYYMMDD')+","+
          moment(start).add(14, 'days').format('YYYYMMDD')+"-"+moment(start).add(16, 'days').format('YYYYMMDD')+","+
          moment(start).add(16, 'days').format('YYYYMMDD')+"-"+moment(start).add(18, 'days').format('YYYYMMDD')+","+
          moment(start).add(18, 'days').format('YYYYMMDD')+"-"+moment(start).add(20, 'days').format('YYYYMMDD')+","+
          moment(start).add(20, 'days').format('YYYYMMDD')+"-"+moment(start).add(22, 'days').format('YYYYMMDD')+","+
          moment(start).add(22, 'days').format('YYYYMMDD')+"-"+moment(start).add(24, 'days').format('YYYYMMDD')+","+
          moment(start).add(24, 'days').format('YYYYMMDD')+"-"+moment(start).add(26, 'days').format('YYYYMMDD')+","+
          moment(start).add(26, 'days').format('YYYYMMDD')+"-"+moment(end).add(1, 'days').format('YYYYMMDD');
        u.dataStatistics({
          "keyWord":this.state.keywords,
          "aggsType": "range",
          "aggsField": "poDay",
          "ranges": monthRange,
          "aggsSize":20,
          "size":0
        }, data => {
          // console.log(data);
          for(let i=0;i<data.aggs.length;i++){
            monthData.push(data.aggs[i].count)
          }
          this.setState({
            trendData:monthData,
            trendX:["2","4","6","8","10","12","14","16","18","20","22","24","26",lastDay]
          },()=>{
            this.trend();
          })
        });
      }else {
        let monthRange = moment(start).format('YYYYMMDD') + "-" + moment(start).add(2, 'days').format('YYYYMMDD') + "," +
          moment(start).add(2, 'days').format('YYYYMMDD') + "-" + moment(start).add(4, 'days').format('YYYYMMDD') + "," +
          moment(start).add(4, 'days').format('YYYYMMDD') + "-" + moment(start).add(6, 'days').format('YYYYMMDD') + "," +
          moment(start).add(6, 'days').format('YYYYMMDD') + "-" + moment(start).add(8, 'days').format('YYYYMMDD') + "," +
          moment(start).add(8, 'days').format('YYYYMMDD') + "-" + moment(start).add(10, 'days').format('YYYYMMDD') + "," +
          moment(start).add(10, 'days').format('YYYYMMDD') + "-" + moment(start).add(12, 'days').format('YYYYMMDD') + "," +
          moment(start).add(12, 'days').format('YYYYMMDD') + "-" + moment(start).add(14, 'days').format('YYYYMMDD') + "," +
          moment(start).add(14, 'days').format('YYYYMMDD') + "-" + moment(start).add(16, 'days').format('YYYYMMDD') + "," +
          moment(start).add(16, 'days').format('YYYYMMDD') + "-" + moment(start).add(18, 'days').format('YYYYMMDD') + "," +
          moment(start).add(18, 'days').format('YYYYMMDD') + "-" + moment(start).add(20, 'days').format('YYYYMMDD') + "," +
          moment(start).add(20, 'days').format('YYYYMMDD') + "-" + moment(start).add(22, 'days').format('YYYYMMDD') + "," +
          moment(start).add(22, 'days').format('YYYYMMDD') + "-" + moment(start).add(24, 'days').format('YYYYMMDD') + "," +
          moment(start).add(24, 'days').format('YYYYMMDD') + "-" + moment(start).add(26, 'days').format('YYYYMMDD') + "," +
          moment(start).add(26, 'days').format('YYYYMMDD') + "-" + moment(start).add(28, 'days').format('YYYYMMDD') + "," +
          moment(start).add(28, 'days').format('YYYYMMDD') + "-" + moment(end).add(1, 'days').format('YYYYMMDD');
        u.dataStatistics({
          "keyWord":this.state.keywords,
          "aggsType": "range",
          "aggsField": "poDay",
          "ranges": monthRange,
          "aggsSize": 20,
          "size": 0
        }, data => {
          // console.log(data);
          for (let i = 0; i < data.aggs.length; i++) {
            monthData.push(data.aggs[i].count)
          }
          this.setState({
            trendData: monthData,
            trendX: ["2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22", "24", "26", "28", lastDay]
          }, () => {
            this.trend();
          })
        });
      }
    }
  };
  // 获取关键词
  getKey=()=>{
    u.topicList(data => {
      if (data.message !== undefined) {
        message.error(data.message);
      }
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].id == this.state.index) {
            this.setState({
              keywords: data[i].area_key
            },()=>{
              this.analysis();
            });
          }
        }
      }
    });
  }
  analysis = async () => {
    let mediaTrend = echarts.init(window.document.getElementById('trend'));
    let mediaDistributed = echarts.init(window.document.getElementById('distributed'));
    let mediaArea = echarts.init(window.document.getElementById('area'));
    let todayZero=u.getDate(0,false);
    let todayData=[],siteData=[],useSite=[];
    let range1=moment(todayZero).format('YYYYMMDDHH')+"-"+moment(todayZero).add(2, 'H').format('YYYYMMDDHH')+","+
      moment(todayZero).add(2, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(4, 'H').format('YYYYMMDDHH')+","+
      moment(todayZero).add(4, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(6, 'H').format('YYYYMMDDHH')+","+
      moment(todayZero).add(6, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(8, 'H').format('YYYYMMDDHH')+","+
      moment(todayZero).add(8, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(10, 'H').format('YYYYMMDDHH')+","+
      moment(todayZero).add(10, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(12, 'H').format('YYYYMMDDHH')+","+
      moment(todayZero).add(12, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(14, 'H').format('YYYYMMDDHH')+","+
      moment(todayZero).add(14, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(16, 'H').format('YYYYMMDDHH')+","+
      moment(todayZero).add(16, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(18, 'H').format('YYYYMMDDHH')+","+
      moment(todayZero).add(18, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(20, 'H').format('YYYYMMDDHH')+","+
      moment(todayZero).add(20, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(22, 'H').format('YYYYMMDDHH')+","+
      moment(todayZero).add(22, 'H').format('YYYYMMDDHH')+"-"+moment(todayZero).add(24, 'H').format('YYYYMMDDHH');


      var date = new Date()
      var week = new Date().getDay()
      var year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let newTime = year + '-' + month + '-' + day + ' ' + '00:00:00'
      let timeList = []
  
      var dayList = []
      for (var i = 0; i < this.state.hours.length; i++) {
        if (this.state.hours[i] < 10) {
          let dayTime = '' + year + '-' + month + '-' + day + ' 0' + this.state.hours[i] + ':00:00'
          // alert((new Date(dayTime)).getTime())
          dayList.push((new Date(dayTime)).getTime())
        } else {
          let dayTime = '' + year + '-' + month + '-' + day + ' ' + this.state.hours[i] + ':00:00'
          dayList.push((new Date(dayTime)).getTime())
        }
      }
      var timeStr = ''
      for (var i = 0; i < dayList.length - 1; i++) {
        timeStr = timeStr + dayList[i] + '-' + dayList[i + 1] + ','
      }
      timeStr = timeStr.substring(0, timeStr.length - 1)
    // 专题数据总量
    u.dataStatistics({
      "keyWord":this.state.keywords,
      "size":0
    }, data => {
      this.setState({
        total: data.total
      })
    });
    // 今日总量
    u.dataStatistics({
      "keyWord":this.state.keywords,
      "startTime": u.getDate(0, false),
      "endTime": moment().format('YYYY-MM-DD HH:mm:ss'),
      "size":0
    }, data => {
      this.setState({
        todayTotal: data.total
      })
    });
    // 今日柱状图
    u.dataStatistics({
      "keyWord":this.state.keywords,
      "aggsType": "range",
      "aggsField": "addTime",
      "ranges": timeStr,
      "aggsSize":20,
      "size":0
    }, data => {
      for(let i=0;i<data.aggs.length;i++){
        todayData.push(data.aggs[i].count)
      }
      this.setState({
        trendData:todayData
      },()=>{
        this.trend();
      })
    });
    // 载体分布情况
    u.dataStatistics({
      "keyWord":this.state.keywords,
      "aggsType": "terms",
      "aggsField": "webSiteType",
      "aggsSize":20,
      "size":0
    }, data => {
      let num=[],type=[],sum=[];
      for(let i=0;i<data.aggs.length;i++){
        num.push(data.aggs[i].count);
        switch (data.aggs[i].key + ""){
          case "0":
            type.push("新闻");
            break;
          case "1":
            type.push("论坛");
            break;
          case "2":
            type.push("微博");
            break;
          case "3":
            type.push("平面媒体");
            break;
          case "5":
            type.push("博客");
            break;
          case "6":
            type.push("贴吧");
            break;
          case "7":
            type.push("其他");
            break;
          case "9":
            type.push("twitter");
            break;
          case "10":
            type.push("微信");
            break;
          case "11":
            type.push("招标");
            break;
          case "13":
            type.push("外文网站");
            break;
          case "14":
            type.push("公众号");
            break;
          case "19":
          type.push("热点");
            break;
          default:
            type.push("未知");
            break;
        }
      }
      for(let i=0;i<type.length;i++){
        sum.push({value:num[i],name:type[i]})
      }
      this.setState({
        carrier:sum,
      },()=>{
        this.distributed();
      })
    });
    // 地域使用情况
    for(let i=0;i<7;i++){
      siteData.push(Math.floor(Math.random()*1000))
    }
    for(let i=0;i<7;i++){
      useSite.push({value:siteData[i],name:this.state.sites[i]})
    }
    this.setState({
      siteState:useSite,
    },()=>{
      this.area();
    })
    window.onresize = function () {
      mediaTrend.resize();
      mediaDistributed.resize();
      mediaArea.resize();
    }
  };
  trend = async () => {
    let mediaTrend = echarts.init(window.document.getElementById('trend'));
    mediaTrend.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: "{a} <br/>{b}: {c}条"
      },
      grid: {
        left: '0',
        right: '0',
        top: '5%',
        bottom: '0',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: this.state.trendX,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#a1a5b5"
          },
          axisLine: {
            lineStyle: {
              color: "#a1a5b5",
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#a1a5b5"
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            }
          }
        }
      ],
      series: [
        {
          name: '监测趋势',
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#566afe'},
                  {offset: 1, color: '#518bff'}
                ]
              )
            },
          },
          barWidth: '30px',
          barCategoryGap: '10px',
          data: this.state.trendData
        }
      ]
    },true);
  };
  distributed = async () => {
    let mediaDistributed = echarts.init(window.document.getElementById('distributed'));
    mediaDistributed.setOption({
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c}条({d}%)"
      },
      series: [
        {
          name: '分布情况',
          type: 'pie',
          radius: ['50%', '65%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          color: this.state.colors1,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              },
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: this.state.carrier
        }
      ]
    })
  };
  area = async () => {
    let mediaArea = echarts.init(window.document.getElementById('area'));
    mediaArea.setOption({
      tooltip: {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
      },
      series: [
        {
          name: '面积模式',
          type: 'pie',
          radius: [30, 110],
          center: ['52%', '50%'],
          roseType: 'area',
          color: this.state.colors2,
          label: {
            show: true,
            formatter: "{b}  {d}%"
          },
          labelLine: {
            lineStyle: {
              color: "#CBCED1"
            }
          },
          data: this.state.siteState
        }
      ]
    })
  };

  componentDidMount() {
    this.getKey();
    // this.analysis();
    this.area();
  }

  render() {
    return (
      <div className="analysis-content">
        <Loading/>
        <div className="a-title">访问时长趋势</div>
        <div className="a-trend">
          <div className="at-title">
            <div className="at-data">
              <span>监测趋势</span>
              <span>专题数据总量:<span className="special">{this.state.total}</span></span>
              <span>今日总量:<span className="special">{this.state.todayTotal}</span></span>
            </div>
            <div className="at-select">
              <Button onClick={()=>{this.timeRange(0)}} className="activeBtn">今日</Button>
              <Button onClick={()=>{this.timeRange(1)}}>本周</Button>
              <Button onClick={()=>{this.timeRange(2)}}>本月</Button>
            </div>
          </div>
          <div id="trend"></div>
        </div>
        <div className="a-distributed">
          <h3>载体分布情况</h3>
          <div id="distributed"></div>
          <div className="ad-legend">
            {
              this.state.carrier.length>0?
                <ul>
                  {
                    this.state.carrier.map((item, i) => {
                      return <li key={i}>
                        <span className="legendColor" style={{backgroundColor: this.state.colors1[i]}}> </span>
                        <span className="legendName">{item.name}</span>
                        <span className="legendValues">{item.value}条</span>
                        <span>{(item.value / this.state.total * 100).toFixed(2)}%</span>
                      </li>
                    })
                  }
                </ul> : " "
            }
          </div>
        </div>
        <div className="a-area">
          <h3>地域使用情况</h3>
          <div id="area"></div>
        </div>
      </div>
    );
  }
}